.mchat-mod {
  .top {
    @extend %flex-center;

    justify-content: space-between;
    flex: 0 0 auto;
    background: $c-accent;
    color: #fff;
    padding: 0.4em 10px;
    line-height: 1.4em;

    a {
      color: #fff;
    }
  }

  .moderation {
    background: $c-bg-box;
    overflow: auto;

    .block {
      padding: 0 10px 10px 10px;
    }

    .history {
      td {
        padding: 0.3rem 0.5rem 0.3rem 0;
      }

      table {
        width: 100%;
      }

      .reason {
        text-transform: capitalize;
      }

      .mod,
      time {
        opacity: 0.8;
      }
    }

    .line-text {
      padding-top: 10px;
      font-style: italic;
    }

    .infos > * {
      display: inline-block;
      margin-right: 5px;
    }

    .timeout a {
      @extend %nowrap-ellipsis;

      color: $c-accent;
      display: block;
      line-height: 1.5em;

      @include transition;

      margin-left: -10px;
    }

    .timeout a::before {
      opacity: 0;
      transition: 0.3s;
    }

    .timeout a:hover {
      margin-left: 0;
    }

    .timeout a:hover::before {
      opacity: 1;
      margin-right: 2px;
    }

    .shadowban {
      margin-top: 10px;
    }

    .shadowban form {
      display: inline;
    }
  }
}
